
let ul = document.querySelector(".img_box>ul");
let arrow_left = document.querySelector(".arrow_left");
let arrow_right = document.querySelector(".arrow_right");
let dots = document.querySelector(".dot_box");
// 初始值(用于控制轮播图)
let index = 1;
// 保存上一次操作的值
let lastIndex = 1;


let xhr = new XMLHttpRequest();
xhr.open("GET", "http://studentback.dfbuff.top/getMethod?type=图片")
xhr.send();
xhr.addEventListener("readystatechange", function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      JSON.parse(xhr.response).result.forEach(function (item) {
        console.log(item.content);
        ul.innerHTML += `<li><a href="javascript:;"><img src=${item.content}></a></li>`
      })
      let li_list = document.querySelectorAll("li");
      li_list.forEach(function(item,index){
        dots.innerHTML += `<span class="dot" data-index=${index+1}></span>`
      })
      let dots2 = document.querySelectorAll(".dot_box>span");

      dots2[0].classList += " dotActive"


      ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
      ul.appendChild(ul.children[1].cloneNode(true));

      ul.style.transform = `translateX(-${index}00%)`;
      setTimeout(function () {
        ul.style.transition = "0.2s ease-in-out";
      }, 300);

      // 右箭头移动功能
      arrow_right.addEventListener("click", function () {
        // ul平移自身100% * index
        ul.style.transform = `translateX(-${++index}00%)`;
        // 判断index是否到达最后一张(无缝)
        if (index === li_list.length + 1) {
          console.log("到达最后一张");
          // 瞬间回到第二张图片(真正的第一张)
          index = 1;
          // transitionend事件, 用于检测过渡效果是否完成
          ul.addEventListener("transitionend", function () {
            console.log("过渡效果已经完成, 可以瞬间跳转");
            // 关闭过渡效果
            ul.style.transition = "none";
            // 复位
            ul.style.transform = `translateX(-${index}00%)`;

            // 恢复过渡效果
            // getComputedStyle 获取css的最终样式 (获取完毕之后可以设置多次同个属性)
            window.getComputedStyle(ul, "style").transition;
            ul.style.transition = "0.2s ease-in-out";
          }, {
            // 设置一次事件, 避免出现同一个行为事件触发多次回调函数
            once: true
          });
        };
        // 切换小圆点颜色
        dotColor();
      });


      arrow_left.addEventListener("click", function () {
        // ul平移自身100% * index
        ul.style.transform = `translateX(-${--index}00%)`;
        // 判断index是否到达第一张(无缝)
        if (index === 0) {
          console.log("到达第一张");
          // 瞬间回到倒数第二张图片(真正的最后一张)
          index = li_list.length ;
          // transitionend事件, 用于检测过渡效果是否完成
          ul.addEventListener("transitionend", function () {
            console.log("过渡效果已经完成, 可以瞬间跳转");
            // 关闭过渡效果
            ul.style.transition = "none";
            // 复位
            ul.style.transform = `translateX(-${index}00%)`;
            // 恢复过渡效果
            // getComputedStyle 获取css的最终样式 (获取完毕之后可以设置多次同个属性)
            window.getComputedStyle(ul, "style").transition;
            ul.style.transition = "0.2s ease-in-out";
          }, {
            // 设置一次事件, 避免出现同一个行为事件触发多次回调函数
            once: true
          });
        };
        // 切换小圆点颜色
        dotColor();
      });



      // 给小圆点绑定点击事件
      dots2.forEach(function (el) {
        el.addEventListener("click", function () {
          // 获取自定义的属性data-index, 这个值就是当前ul所要平移的值
          let dataIndex = el.dataset.index;
          // 当前操作的值赋值给index初始值
          index = dataIndex;
          ul.style.transform = `translateX(-${dataIndex}00%)`;
          // 切换小圆点颜色
          dotColor();
        });
      });

      // 小圆点颜色切换
      function dotColor() {
        // 清除上一次操作的样式
        dots2[lastIndex - 1].classList.remove("dotActive")
        // index 就是当前操作的下标
        dots2[index - 1].classList.add("dotActive");

        // 将当前操作的index赋值lastIndex
        lastIndex = index;
      };
    }
  }



})

